<template>
  <el-container style="flex-direction:column;">
    <el-row style="padding-bottom: 10px;">
      <el-button v-if="getMenuListByPath.add" type="primary" size="mini" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button v-if="getMenuListByPath.update" type="success" size="mini" icon="el-icon-edit" :disabled="multipleSelection.length !== 1" @click="updateHandleClick">修改</el-button>
      <el-button v-if="getMenuListByPath.delete" type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length == 0" @click="deleteHandleClick">删除</el-button>
    </el-row>
    <el-table
      row-key="permissionId"
      @selection-change="selectionChange"
      :data="menuTree" size="mini"
      style="width: 100%">
      <el-table-column align="center" header-align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="permissionName" width="150"
        label="菜单名称">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="path"
        label="路由地址">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="permissionCode"
        label="权限标识">
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="isMenu" width="80"
        label="菜单类型">
         <template slot-scope="scope">
            <div v-if="scope.row.isMenu == 1">菜单</div>
            <div v-else-if="scope.row.isMenu == 2">按钮</div>
            <div v-else>页面</div>
         </template>
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="icon"
        label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon" style="font-size:18px"></i>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center"
        prop="sort" width="60"
        label="排序">
      </el-table-column>
      <el-table-column v-if="getMenuListByPath.update || getMenuListByPath.delete" label="操作" width="160" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button style="margin-right:3px;" v-if="getMenuListByPath.update"
            size="mini"  type="primary"
            @click="handleEdit(scope.$index, scope.row)"  icon="el-icon-edit"></el-button>
          <el-popconfirm v-if="getMenuListByPath.delete"
            placement="top"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-delete"
            icon-color="red"
            title="确定删除本条数据吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              size="mini" slot="reference"
              type="danger" icon="el-icon-delete"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <Menu_add_or_update_dialogVue
      append-to-body
      :permissionId="permissionId"
      :title="title"
      :visible.sync="visible" 
      @closeDialog="closeDialog"
      @operationFrom="operationFrom"
    >
    </Menu_add_or_update_dialogVue>
  </el-container>
</template>

<script>
import Menu_add_or_update_dialogVue from "./components/Menu_add_or_update_dialog.vue";
import { getAllMenu ,deleteMenuById,deleteMenuByIdList} from "@/api/modules/SystemManagement/menuManagement";
export default {
  props:["getMenuListByPath"],
  components:{
    Menu_add_or_update_dialogVue
  },
  data() {
    return {
      menuTree:[],
      permissionId:null,
      multipleSelection: [],
      title:"",
      visible: false,
    }
  },
  created(){
    this.getAllMenu();
  },
  methods: {
    //修改按钮点击事件
    updateHandleClick(){
      this.handleEdit(null,this.multipleSelection[0])
    },
    //删除按钮点击事件
    deleteHandleClick(){
      let data = "";
      for(let j=0 ; j < this.multipleSelection.length; j++) {
        if(this.multipleSelection[j].children.length !=0){
          this.$message({
            message: '当前选中的菜单中拥有子菜单，不能删除！',
          });
          return ;
        }
        data += this.multipleSelection[j].permissionId + ","
      }
      data = data.slice(0,-1);
      deleteMenuByIdList({id:data}).then(()=>{
        this.$message({
          message: '菜单删除成功！',
          type: 'success'
        });
        this.getAllMenu();
      })
    },
    //表格操作的编辑
    handleEdit(index, row) {
      // console.log(index, row);
      this.permissionId = row.permissionId
      this.title="编辑菜单";
      this.visible=true;
    },
    //表格操作的删除
    handleDelete(index, row) {
      // console.log(index, row);
      console.log(row.children.length)
      if(row.children.length > 0){
        this.$message({
          message: '删除的菜单拥有子菜单，不能删除！',
        });
        return;
      }
      deleteMenuById({id:row.permissionId}).then(()=>{
        this.$message({
          message: '菜单删除成功！',
          type: 'success'
        });
        this.getAllMenu();
      })
    },
    //table表格选择的数组
    selectionChange(val){
      this.multipleSelection = val;
    },
    //打开dialog
    add(){
      this.title="新增菜单";
      this.visible=true;
    },
    //关闭dialog
    closeDialog(){
      this.visible=false;
    },
    //操作dialog表单，刷新数据
    operationFrom(){
      this.visible=false;
      this.getAllMenu();
    },
    //获取所有菜单
    getAllMenu(){
      getAllMenu().then(res=>{
        this.menuTree = res.data.data
      })
    }

  } 
}
</script>

<style>

</style>